<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <script>
        let imgs = [
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F019a0a5bdebfdda80121ab5dca3b01.jpg%403000w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623313361&t=e9b124e07b4198ee05a76af7ee95aa0d",
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fblog.epicpetster.com%2Fwp-content%2Fuploads%2F2018%2F04%2Fsiamese-cat-breeders.png&refer=http%3A%2F%2Fblog.epicpetster.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623313436&t=68aa33fa434f9069e643d91b95671aa7",
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.zeze.com%2Fattachment%2Fforum%2F201609%2F03%2F152427ur444jtt4nixlijx.jpg&refer=http%3A%2F%2Fi.zeze.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623376033&t=f58d051c97446d58063800f47b60afc9",
        ];
        // 图片加载
        let loadImg = (src) => {
                return new Promise((resolve, reject) => {
                    let img = document.createElement('img');
                    img.src = src;
                    img.classList.add('active');
                    img.onload = () => {
                            resolve(img)
                        }
                        // resolve(img)
                })
            }
            // 渲染图片
        let show = (imgs) => {
                imgs.forEach(element => {
                    document.body.appendChild(element)
                });
            }
            // 处理图片地址
        let easy = arr => {
            arr = arr.map(ele =>
                loadImg(ele)
            );
            return arr
        }
        Promise.all(easy(imgs)).then(res => {
            show(res);
        })
    </script>
</body>

</html>